<template>
  <div class="article-container" ref="article-lists">
    <van-pull-refresh
     :success-duration="2000"
     :success-text="refreshSuccessText"
     v-model="shutDownLoading"
     @refresh="onRefresh"
    >
      <van-list
        v-model="upDownLoading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <van-cell v-for="(article, index) in articlesLists" :key="index">
          <article-items :article="article"></article-items>
        </van-cell>
      </van-list>
    </van-pull-refresh>
  </div>
</template>
<script>

// 导入单项文章组件
import articleItems from '@/components/articleItem'

// 导入获取频道新闻列表api接口
import { articles } from '@/api/home'

// 导入防抖模块
import { debounce } from 'lodash'

export default {
  name: 'articleLists',
  data () {
    return {
      // 文章列表
      articlesLists: [],
      // 上拉加载更多状态
      upDownLoading: false,
      // 加载完成状态
      finished: false,
      // 下拉刷新加载更多状态
      shutDownLoading: false,
      // 获取下一页数据的时间戳
      timestamp: null,
      // 下拉刷新成功的提示文本
      refreshSuccessText: '',
      // 列表滚动距离
      articleScrollTop: 0
    }
  },
  props: ['channel'],
  components: {
    articleItems
  },
  methods: {
    async onLoad () {
      // axios异步请求数据
      const res = await articles({
        // channel_id频道id
        channel_id: this.channel.id,
        // timestamp时间戳
        timestamp: this.timestamp || Date.now(),
        // 是否是置顶,1指定, 0 不是置顶
        with_top: 1
      })
      // 将数据添加到文章列表中
      this.articlesLists.push(...res.data.data.results)

      // 加载状态结束
      this.upDownLoading = false

      // 判断articlesLists数组长度是否等于0来决定加载状态是否结束
      if (this.articlesLists.length) {
        // 上拉加载更多
        this.timestamp = res.data.data.pre_timestamp
      } else {
        // 数据全部加载完成
        this.finished = true
      }
    },

    // 下拉刷新时触发
    async onRefresh () {
      // axios异步请求数据
      const res = await articles({
        // channel_id频道id
        channel_id: this.channel.id,
        // timestamp时间戳
        timestamp: Date.now(),
        // 是否是置顶,1指定, 0 不是置顶
        with_top: 1
      })
      // 下拉刷新向文章列表追加数据
      this.articlesLists.unshift(...res.data.data.results)
      // 关闭下拉刷新状态
      this.shutDownLoading = false
      // 下拉提示文本
      this.refreshSuccessText = `更新了${res.data.data.results.length}条数据`
    }
  },
  // 用户进入详情页, 返回时候还在原来滚动位置
  mounted () {
    const articleLists = this.$refs['article-lists']
    articleLists.onscroll = debounce(() => {
      this.articleScrollTop = articleLists.scrollTop
    }, 50)
  },
  // 注意: activated(离开触发)只能在 keep-alive包含的组件中使用.
  activated () {
    // 把记录的到顶部的距离重新设置回去
    this.$refs['article-lists'].scrollTop = this.articleScrollTop
  }
}
</script>
<style lang="less">
.article-container{
  position: fixed;
  left: 0;
  right: 0;
  top: 90px;
  bottom: 50px;
  overflow-y: auto;
}
</style>
